<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../03 layout/css/normalize.css">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .news-list {
            width: 820px;
            height: 380px;
            /* background-color: yellow; */
            margin: 100px auto;
            position: relative;
        }

        .news-list li {
            position: absolute;
        }

        .box2 {
            width: 820px;
            height: 40px;
            
            position: relative;
            top: 340px;
        }
        .box2 a {
            display: block;
            float: left;
            padding:0 26px;
            line-height: 40px;
            color: rgb(66,66,66);
            background-color: rgb(227,226,226);
        }
        .box2 a:hover{
            color: rgb(171,142,102);
            background-color: rgb(247,246,246);
            border-bottom: 3px rgb(206,168,97) solid;
        }
    </style>
</head>

<body>
    <div class="news-list">
        <li><a href="#"><img src="./06/1.jpeg" alt="1"></a></li>
        <li><a href="#"><img src="./06/2.jpeg" alt="2"></a></li>
        <li><a href="#"><img src="./06/3.jpeg" alt="3"></a></li>
        <li><a href="#"><img src="./06/4.jpeg" alt="4"></a></li>
        <li><a href="#"><img src="./06/5.jpeg" alt="5"></a></li>
        <div class=box2>
            <a href="#">灵能秘宝</a>
            <a href="#">灵能特工皮肤</a>
            <a href="#">灵能特工2020通行证</a>
            <a href="#">电竞漫画首发</a>
            <a href="#">LPL出征鹅肠手办预定</a>
        </div>
    </div>
</body>

</html>